<template>
  <div style="background-color: #eeeeee;height:932px">
    <van-nav-bar
        title="港澳实名认证"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <br>
    <van-cell-group inset>
      <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="证件类型："
          placeholder="选择证件类型"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker
            :columns="columns"
            @cancel="showPicker = false"
            @confirm="onConfirm"
        />
      </van-popup>
      <van-field v-model="cardName" type="cardName" label="姓名："/>
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="cardId" type="cardId" label="证件号："/>
    </van-cell-group>


    <van-cell-group inset>
      <van-field
          v-model="showProValue"
          is-link
          readonly
          label="地区："
          placeholder="请选择地区"
          @click="showPro = true"
      />
      <van-popup v-model:show="showPro" round position="bottom">
        <van-picker
            :columns="ded"
            @cancel="showPro = false"
            @confirm="inConfirm"
        />
      </van-popup>
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" @click="submit111()">
        提交
      </van-button>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue';
import {createApp} from 'vue';
import request from "@/request/request.js";
import {showFailToast, showSuccessToast} from "vant";

const route = useRouter()
const app = createApp();
const onClickLeft = () => {
  // 返回上一页
  route.push('/authentication')
}

const cardName = ref('');
const cardId = ref('');
const showPicker = ref(false);
const showPro = ref(false);
const showProValue = ref('');
const fieldValue = ref('');
const onConfirm = ({selectedOptions}) => {
  showPicker.value = false;
  fieldValue.value = selectedOptions[0].text;
};
const inConfirm = ({selectedOptions}) => {
  showPro.value = false;
  showProValue.value = selectedOptions[0].text;
};
const columns = [
  {text: '港澳居民居住证', value: 'gangaojuminjuzhuzheng'},
  {text: '港澳居民来往内地通行证', value: 'gangaojuminlaiwangneiditongxingzheng'},
];
const ded = [
  {text: '香港', value: 'xianggang'},
  {text: '澳门', value: 'aomen'},
];
// 链接到后端
const submit111 = () => {
  console.log(111)
  request({
    url: '/sysuser/realName',
    method: 'post',
    params: {
      cardName: cardName.value,
      cardId: cardId.value
    }
  }).then(res=>{
    if (res.code == 200){
      showSuccessToast('认证成功');
    }else{
      showFailToast('认证失败');
    }
  })
}

</script>